<template>
  <div>

    <van-sticky :offset-top="0">
      <!-- <van-button type="info">吸顶距离</van-button> -->
      <div class="mSiteHeader-wrap">
      <div class="site_header">
        
        <a href="javascript:;" class="router-link1">
          <img src="../assets/img/headerLogoyi_03.png" alt="" />
        </a>
        <router-link to="/seek">
        <div class="header_search">
          <span>奥特曼集合视频</span>
          <a href="javascript:;" class="header-van">
               <van-icon name="search" />
          </a>
        </div>
        </router-link>
        <router-link to="/mine" >
        <a href="javascript:;" class="header_login" title="我的">
          <van-icon name="user-o" />
        </a>
        </router-link>
      </div>
      <div class="site_nav">
        <van-tabs v-model="active" sticky line-width="15" color="aqua">
            <van-tab v-for="(item,index) in navarr" :title="item.value" :key="index">
            </van-tab>
        </van-tabs>
        <router-link to="/classify">
        <div class="nav_linkmore">
          <van-icon name="bars" />
        </div>
        </router-link>
      </div>
    </div>
    </van-sticky>
    
    <!-- 轮播 -->
    <div class="m-box">
        <div class="m-sliding">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
              <van-swipe-item v-for="(item,index) in imgarr" :key="index" >
                <img :src="item.img" class="m-boximg">
              </van-swipe-item>
            </van-swipe>
        </div>
    </div>
    <!-- 热播模块 -->
    <div class="m-pic-horizontalNew">
        <ul class="m-pic-list">
          <li v-for="(item,index) in lbarr" :key="index" class="lbarrs" @click="vide(index)">
              <div class="piclist-img">
                <!-- <router-link to="/telev" > -->
                <a href="javascript:;">
                  <img :src="item.img" alt="">
                  <div class="c-rt">
                    <img :src="item.images1" >
                  </div>
                  <div class="c-rb">
                    <span>{{item.text3}}</span>
                  </div>
                </a>
                <!-- </router-link> -->
              </div>
              <div class="piclist-title">
                <div class="c-title">{{item.text1}}</div>
                <div class="c-info">{{item.text2}}</div>
              </div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'homePage',
  props: {
    msg: String
  },
  data() {
    return{
        navarr:[],
        imgarr:[],
        active: '',
        lbarr:[]
    }
  },
  mounted() {
      // navarr前端接口
    this.$axios.get("/api/succeednavarr").then(data => {
      var succeednavarr = data.data
      // console.log(succeednavarr);
      this.navarr = succeednavarr;
    }),
    // imgarr前端接口
    this.$axios.get("/api/homepageimgarr").then(data => {
      var homepageimgarr = data.data
      homepageimgarr.forEach((item) => {
          item.img = require("../assets/" + item.img)
      })
      this.imgarr = homepageimgarr
    })


    //lbarr接口
    this.$axios.get("/api/homePagelbarr").then(data => {
      var homePagelbarr = data.data;
      homePagelbarr.forEach((item) => {
          item.img = require("../assets/" +item.img)
          item.images1 = require("../assets/" + item.images1)
      })
      this.lbarr = homePagelbarr

    })
  },

  methods: {
    vide(index) {
        localStorage.setItem("lbarr",index)
    }
  } 
};
</script>

<style>

/* 头部导航 */
.mSiteHeader-wrap {
  position: relative;
  display: block;
  height: 0.9818rem;
  background-image: linear-gradient(
    90deg,
    rgb(26, 46, 74) 0rem,
    rgb(64, 152, 144) 100%
  );
}
.site_header {
  height: 0.4182rem;
  padding: 0.0636rem 0.1182rem 0.0454rem 0.1363rem;
  display: block;
}
.router-link1 {
  display: inline-block;
  width: 0.3527rem;
  height: 0.2682rem;
  float: left;
}
.router-link1 img {
  width: 100%;
  height: 100%;
  
}
.header_search {
  float: left;
  width: 2.2rem;
  height: 0.3318rem;
  padding-left: 0.4782rem;
  border-radius: 0.1363rem;
  background-image: linear-gradient(
    90deg,
    rgba(16, 36, 65, 0.26) 0px,
    rgba(17, 85, 99, 0.26) 100%
  );
}
.header_search span {
  display: inline-block;
  line-height: 0.3418rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.14rem;
  transform: translateX(-0.2545rem);
}
.header_search a {
    display: inline-block;
    width: 0.3909rem;
    height: 0.2727rem;
}
.header-van i {
    position: relative;
    top: 0.0364rem;
    font-size: 0.1818rem;
    color:#6495ed;
    transform: translateX(0.6rem);
}
.header_login {
  display: inline-block;
  width: 0.3363rem;
  height: 0.3363rem;
  float: right;
}
.header_login i {
  font-size: 0.2818rem;
  color: #fff;
}
.site_nav {
  height: 0.3637rem;
  position: relative;
}
.van-tabs--line {
  width: 90%;
}
.van-tabs--line>div .van-sticky .van-tabs__wrap .van-tabs__nav.van-tabs__nav--line{
  background-image: linear-gradient(
    90deg,
    rgb(26, 46, 74) 0rem,
    rgb(64, 152, 144) 100%
  ) !important;
  
}
.site_nav span {
  font-size: 0.1454rem;
  color: #fff;
  font-weight: 700;
}
.nav_linkmore {
  position: absolute;
  right: 0.1727rem;
  top: 0.0818rem;
  width: 0.1182rem;
  height: 0.3637rem;
}
.nav_linkmore i {
  font-size: 0.2182rem;
  color: #fff;
}
.m-box {
  padding: 0;
}
.m-boximg {
  width: 3.7637rem;
  height: 1.8818rem;
}
.van-swipe__indicators {
  left: 88%;
}
.van-swipe__indicators i {
  width: 0.1091rem;
  height: 0.0454rem;
  border-radius: 0;
}
/* 热播模块 */
.m-pic-list {
  width: 3.6091rem;
  padding: 0.0909rem 0 0 0.1091rem;
}

.m-pic-list li {
 
  display: inline-block;
  box-sizing: border-box;
  width: 48.0%;
  height: auto;
  padding: 4.54px 0 18.18px 0;
  margin-right: 4px;
} 
.piclist-img {
   position: relative;
  width: 1.6754rem;
  height: 0.9818rem;
}
.piclist-img a  img {
  width: 100%;
  height: 100%;
}
.piclist-title {
  text-align: left;
}
.c-title {
  font-size: 0.1505rem;
  line-height: 0.2553rem;
  color: #222;
  
}
.c-info {
  font-size: 0.1305rem;
  color: rgb(153, 153, 153);
  line-height: 0.1606rem
}
.c-rt {
  position: absolute;
  top: 0.0182rem;
  right: 0.0272rem;
  width: 0.3637rem;
  height: 0.1818rem;
}
.c-rt img {
  width: 100%;
  height: 100%;
}
.c-rb {
  position: absolute;
  bottom: 0.0272rem;
  right: 0.0728rem;
}
.c-rb span {
  font-size: 0.1091rem;
  color: #fff;
  text-shadow: 0 0 0.0364rem rgba(0,0,0,0.7);
}
</style>